*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    background: linear-gradient(#99f, #f99);
}

body, .navbar, .navbar ul{
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar{
    position: relative;
    padding: 20px;
    border-radius: 50px;
    background-color: #fff;

}
.navbar input{
    width: 40px;
    height: 40px;
    opacity: 0;
    cursor: pointer;
}

.navbar span{
    position: absolute;
    left: 25px;
    /* 先将两条线放到一起，然后单独设置第二条线的位置 */
    top: calc(50% - 10px);
    width: 30px;
    height: 4px;
    border-radius: 15px;
    background-color: #999;
    /* 现在span 覆盖复选框 我们鼠标放到 span 上点不中复选框  */
    pointer-events: none;
    transition: transform 0.3s ease-in-out 0.3s, top .3s ease-in-out;

}

/* 设置第二条线的位置 */
.navbar span:nth-of-type(2){
    top: calc(50% + 6px);
}

.navbar ul{
    width: 0;
    overflow: hidden;

    white-space: nowrap;
    transition: all 0.5s;
}

.navbar ul li{
    list-style: none;
    margin: 0 15px;
}

.navbar ul li a{
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
}


.navbar ul li a:hover{
    color: #fb7299;
}

/* :checked 是当选中的复选框的时候 ~ 是兄弟选择器 查找同一个级的 ul */

.navbar input:checked ~  ul{
    width: 350px;
}

.navbar input:checked ~ span:nth-child(2){
    top: calc(50% - 2px);
    transform: rotate(-45deg);
    background-color: #fb7299;
    transition: top .3s ease-in-out, transform 0.3s ease-in-out 0.3s;
}

.navbar input:checked ~ span:nth-child(3){
    top: calc(50% - 2px);
    transform: rotate(45deg);
    background-color: #fb7299;
    transition: top .3s ease-in-out, transform 0.3s ease-in-out 0.3s;

}